import { Directive, ElementRef, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core';
//Controls
import { AmChartsService } from "@amcharts/amcharts3-angular";

@Directive({
    selector: '[scatterChart]',
})
export class ScatterChartDirective implements OnInit, OnDestroy {
    private chart: any;
    private _chartData: any[] = [];
    private _peersList: any[];
    private _legendData: any[] = [];
    private _currentCompany: string;

    @Input() chartID: string;
    @Input() currentCompany: string;
    @Input() maxExposure: number;
    @Input() set riskLevels(value: any[]) {
        if (value) {
            // this._legendData = this.generateLegend(value);
            if (this.chart) {
                this.AmCharts.updateChart(this.chart, () => {
                    // this.chart.legend.data = this._legendData;
                });
            }
        }
    }
    @Input() set chartData(value: any[]) {
        if (value) {
            this._chartData = value;
            if (this.chart) {
                this.AmCharts.updateChart(this.chart, () => {
                    this.chart.dataProvider = this._chartData;
                });
            }
        }
    }
    @Input() set peersList(value: any[]) {
        if (value) {
            this._peersList = value;
            // this.generatePeerList();
        }
    }

    constructor(private el: ElementRef, private AmCharts: AmChartsService, private renderer: Renderer2) { }

    ngOnInit() {
        let baloonFunc = function (graphDataItem, graph) {
            return "Exposure: <b>" + graphDataItem.values.x.toFixed(2) + "</b><br/>Management: <b>" + graphDataItem.values.y.toFixed(2) + "</b>";
        }

        this.chart = this.AmCharts.makeChart(this.chartID, {
            type: "xy",
            startDuration: 0,
            marginTop: 30,
            graphs: [
                //all
                {
                    bullet: "round",
                    bulletSize: 10,
                    bulletAlpha: 0.5,
                    lineAlpha: 0,
                    bulletColor: '#f1ab03',
                    xField: "exposure",
                    yField: "management",
                    balloonFunction: baloonFunc
                },
                //current
                {
                    bullet: "round",
                    bulletSize: 12,
                    lineAlpha: 0,
                    fontSize: 8,
                    bulletColor: "black",
                    color: "white",
                    balloonFunction: baloonFunc,

                    xField: "currentX",
                    yField: "currentY",
                    // descriptionField: "peerPosition",

                    labelText: "[[description]]",
                    labelPosition: "middle",
                    labelsEnabled: false
                },
            ],
            valueAxes: [
                {
                    minimum: 0,
                    maximum: 100,
                    title: 'Management',
                    titleFontSize: 11,
                    dashLength: 3,
                    autoGridCount: false,
                    gridCount: 5
                },
                {
                    position: "bottom",
                    title: "Exposure",
                    titleFontSize: 11,
                    minimum: 0,
                    maximum: this.maxExposure,
                    gridCount: 5,
                    autoGridCount: false
                }
            ],
            categoryAxis: {
                autoGridCount: false,
                gridCount: 10
            },
            dataProvider: this._chartData
            /*
            legend: {
                reversedOrder: true,
                markerSize: 9,
                // divId: 'scatterlegend',
                markerType: 'circle',
                data: this._legendData,
                verticalGap: 4
            }
            */
        });
    }

    ngOnDestroy() {
        this.AmCharts.destroyChart(this.chart);
    }

    /*
    generateLegend(levels: any[]): any[] {
        var result: any[] = [];
        levels.forEach(element => {
            result.push({
                title: element.name,
                color: element.color
            });
        });
        return result;
    }

    generatePeerList() {
        console.log('peers list', this._peersList);
        var htmlContent: string = "";
        var halfIndex = Math.ceil(this._peersList.length / 2);
        for (var i = 0; i < halfIndex; i++) {
            htmlContent += "<div class='row'><div class='col-md-6' style='margin-top:3px'><div class='" + (this.currentCompany == this._peersList[i].companyId ? "circleFill" : "circle") + "'>" + this._peersList[i].rank + "</div>&nbsp;" + this._peersList[i].companyName + "</div>";
            if (this._peersList[halfIndex + i])
                htmlContent += "<div class='col-md-6 push-md-6' style='margin-top:3px'><div class='" + (this.currentCompany == this._peersList[halfIndex + i].companyId ? "circleFill" : "circle") + "'>" + this._peersList[halfIndex + i].rank + "</div>&nbsp;" + this._peersList[halfIndex + i].companyName + "</div>";
            htmlContent += '</div>';
        }

        this.el.nativeElement.children.peerlist.innerHTML = htmlContent;
    }
    */
}